<template>
  <div class="card">
    <Title-header title="我的资产"></Title-header>
    <div class="assets_box">
      <div class="assets_content">
        <div class="assets">
          <div class="assets__row">
            <div class="colnum1" style="color: #fab81c">
              <div class="assets__label">我的算力</div>
              <div
                class="assets__value"
                :style="getValueStyle(infoStore.infomation.compute_power)"
              >
                {{
                  parseFloat(infoStore.infomation.compute_power).toFixed(2) ||
                  "0"
                }}
              </div>
            </div>
            <div class="colnum1" style="color: #fab81c">
              <div class="assets__label">Da You余额</div>
              <div
                class="assets__value"
                :style="getValueStyle(infoStore.infomation.dayou)"
              >
                {{ parseFloat(infoStore.infomation.dayou).toFixed(2) || "0" }}
              </div>
            </div>
          </div>
          <div class="assets__row" style="padding-top: 14px">
            <div class="colnum2" style="color: #22825c">
              <div class="assets__label">USDT余额</div>
              <div
                class="assets__value"
                :style="getValueStyle(infoStore.infomation.usdt)"
              >
                ${{ parseFloat(infoStore.infomation.usdt).toFixed(2) || "0" }}
              </div>
            </div>
            <div class="colnum2" style="color: #22825c">
              <div class="assets__label">累计收益余额</div>
              <div
                class="assets__value"
                :style="getValueStyle(infoStore.infomation.total_commission)"
              >
                {{
                  parseFloat(infoStore.infomation.total_commission).toFixed(
                    2
                  ) || "0"
                }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="actions">
      <!-- <router-link to="/recharge" class="actions__btn">
        <van-button class="btn btn--primary">
          <img
            src="@/assets/images/recharge.png"
            style="width: 20px; height: 20px; margin-right: 6px"
            alt=""
          />
          充值</van-button
        >
      </router-link> -->
      <router-link to="/withdraw" class="actions__btn">
        <van-button class="btn btn--secondary">
          <img
            src="@/assets/images/withdraw.png"
            style="width: 20px; height: 20px; margin-right: 6px"
            alt=""
          />
          领取</van-button
        >
      </router-link>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useInfoStore } from "@/store/infoman";
const infoStore = useInfoStore();

const getValueStyle = (value: string | number) => {
  const numberValue = Number(value);
  if (numberValue > 100000) {
    return {
      fontSize: "14px", // Smaller font size for large numbers
    };
  }
  return {
    fontSize: "25px", // Default font size for smaller numbers
  };
};
</script>

<style scoped lang="less">
@import "../styles/common.less";
.assets_box {
  padding: 11px;
  .assets_content {
    padding: 11px;
    border: 1px solid #fff;
    border-radius: 10px 10px 10px 10px;
    .assets {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: #edf9f4;
      border-radius: 10px;
      padding: 31px 25px;

      &__row {
        display: flex;
        justify-content: center;
        align-items: center;

        .colnum1 {
          width: 120px;
          display: flex;
          flex-direction: column;
        }
        .colnum2 {
          width: 120px;
          display: flex;
          flex-direction: column;
        }
        .colnum1:nth-child(1) {
          border-right: 0.5px solid #f3bb37;
          padding-right: 20px;
          &__label {
            text-align: center;
            font-size: 12px;
            color: #fab81c;
          }
        }
        .colnum1:nth-child(2) {
          padding-left: 20px;
        }
        .colnum2:nth-child(1) {
          border-right: 0.5px solid #22825c;
          padding-right: 20px;
        }
        .colnum2:nth-child(2) {
          padding-left: 20px;
        }
      }
      &__row:nth-child(1) {
        padding-bottom: 16px;
        border-bottom: 0.5px dashed #f3bb37;
      }

      &__label {
        text-align: center;
        font-size: 12px;
      }

      &__value {
        text-align: center;
        font-size: 25px;
        font-weight: bold;
        margin-top: 4px;
      }
    }
  }
}

.actions {
  background-color: #fff;
  margin: -35px -0px 0px -0px;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 16px 25px;
  box-shadow: 0px 10px 10px 0px rgba(11, 112, 78, 0.15);
  .actions__btn {
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
  }

  .btn {
    border-radius: @border-radius-max;
    font-weight: 500;
    border: none;
    font-size: @font-size-lg;
    width: 139px;
    height: 47px;

    &--primary {
      background: linear-gradient(158deg, #31dfb0 0%, #0fc68a 100%);
      border-radius: 52px;
      color: white;
      box-shadow: 0px 0px 1px 3px rgba(2, 232, 155, 0.5);
    }

    &--secondary {
      background: linear-gradient(161deg, #f9cf4f 0%, #fdba32 100%);
      border-radius: 52px;
      color: white;
      box-shadow: 0px 0px 1px 3px hsla(48, 88%, 87%, 0.5);
    }
    :deep(.van-button__text) {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>
